import { defineComponent, reactive, toRefs } from "@vue/runtime-core";
import { Descriptions, Modal, Typography } from "ant-design-vue";
import util from "@/utils/index";
import { getTask } from "@/api/task";

export default defineComponent({
  name: "taskDetail",
  setup() {
    const state = reactive({
      title: "",
      width: 520,
      visible: false,
      submitting: false,
      modal: {} as any,
    });

    const openModal = (title: string, id: string) => {
      state.title = title;
      state.visible = true;
      if (id) {
        getTask(id).then((res: any) => {
          if (res && res.success) {
            Object.assign(state.modal, res.result);
          }
        });
      }
    };

    const onCancel = () => {
      state.visible = false;
    };

    return {
      ...toRefs(state),
      openModal,
      onCancel,
    };
  },
  render() {
    return (
      <>
        <Modal
          title={this.title}
          visible={this.visible}
          confirmLoading={this.submitting}
          footer={null}
          onCancel={this.onCancel}
        >
          <Descriptions>
            <Descriptions.Item label="任务名称" span={3}>
              {this.modal.name}
            </Descriptions.Item>
            <Descriptions.Item label="请求参数" span={3}>
              <Typography.Text code={true}>
                {this.modal.request
                  ? JSON.stringify(this.modal.request)
                  : "无返回结果"}
              </Typography.Text>
            </Descriptions.Item>
            <Descriptions.Item label="服务响应" span={3}>
              <Typography.Text code={true}>
                {this.modal.response
                  ? JSON.stringify(this.modal.response)
                  : "无返回结果"}
              </Typography.Text>
            </Descriptions.Item>
            <Descriptions.Item label="异常信息" span={3}>
              {this.modal.error ? (
                <Typography.Text type="danger">
                  {this.modal.error}
                </Typography.Text>
              ) : (
                ""
              )}
            </Descriptions.Item>
            <Descriptions.Item label="创建人" span={3}>
              {this.modal.creator}
            </Descriptions.Item>
            <Descriptions.Item label="创建时间" span={3}>
              {util.dateFormat(this.modal.creationTime)}
            </Descriptions.Item>
          </Descriptions>
        </Modal>
      </>
    );
  },
});
